<html>
  <head>
    <title></title>
    <style></style>
    <script type="text/tiscript">
   
      include "init-storage-1.tis";
      
      var storage;
      var root;
    
      function self.ready() {
        const url = self.url("storage1.sdb");
        storage = Storage.open(url);
        root = storage.root || initStorage(storage);
        
        var form = $(form);
        var ol = $(ol);
        
        function showRecords(range) {
          ol.clear();
          for( var item in range )
            ol.$append(<li>{item.t}</li>);
        }
        
        form.on("change", function() {
          var asc = this.value.order == "ascending";
          stdout.printf("%V\n",this.value);
          switch( this.value.index ) {
            case "by-index" : showRecords( root.itemsByNumber ); break;
            case "by-text" : showRecords( root.itemsByText ); break;
          }
        });
        
        form.sendEvent("change");
        
      }

      function self.closing() {
         storage.close();
         stdout.println("closed");
      }

      event click $(button#rename) {
        storage.commit();
        storage.close();
        System.rename(URL.toPath(self.url("storage1.sdb")), URL.toPath(self.url("storage1new.sdb"))).then(
          function() {
            storage = Storage.open(self.url("storage1new.sdb"));
            root = storage.root;
            debug: root;
          }
        );
      }
    
    </script>
  </head>
<body>
  <button#rename>Rename storage</button>
  <form>
    Order by:
    <button|radio(index) value="by-index" checked>Index</button>
    <button|radio(index) value="by-text">Text</button>
  </form>
  <ol></ol>
  
</body>
</html>
